---
---
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SandDance</title>
    <link rel="stylesheet" type="text/css" href="css/sanddance-app.css">
    <link rel="stylesheet" type="text/css" href="../app/css/sanddance-app-site.css">
    <link rel="shortcut icon" href="../favicon.ico" />
</head>

<body>
    <!-- link to JSON files so we can get a url from the bundler -->
    <a class="sanddance-app-static-content" id="demovote" data-display-name="Demo Vote" data-type="tsv"
        href="../sample-data/demovote.tsv"></a>
    <a class="sanddance-app-static-content" id="titanic" data-display-name="Titanic" data-type="tsv"
        href="../sample-data/titanicmaster.tsv"></a>

    <script>
        function setTheme(darkTheme) {
            localStorage.setItem('theme', darkTheme ? 'Dark' : 'Light');
        }
        var darkTheme = localStorage.getItem('theme') === 'Dark';
        var insights = {
            "titanic": {
                "columns": {
                    "uid": "Name",
                    "x": "Gender",
                    "y": "Joined",
                    "color": "Survived",
                    "z": "TicketCost",
                    "sort": "Survived"
                },
                "scheme": "dual_redgreen",
                "chart": "barchart",
                "view": "2d"
            },
            "demovote": {
                "columns": {
                    "uid": "Id",
                    "x": "Longitude",
                    "y": "Latitude",
                    "color": "Obama",
                    "z": "Education",
                    "sort": "State"
                },
                "scheme": "redblue",
                "chart": "scatterplot",
                "view": "2d",
                "colorBin": "quantize"
            }
        };
        var options = {
            "*": {
                "chartPrefs": {
                    "*": {
                        "*": {
                            "*": {
                                "signalValues": {
                                    "RoleColor_BinCountSignal": 7
                                }
                            }
                        }
                    }
                }
            },
            "titanic": {
                "chartPrefs": {
                    "barchart": {
                        "color": {
                            "Gender": {
                                "scheme": "set2"
                            }
                        }
                    }
                }
            },
            "demovote": {
                "chartPrefs": {
                    "*": {
                        "color": {
                            "Winner": {
                                "scheme": "dual_bluered"
                            }
                        }
                    },
                    "treemap": {
                        "*": {
                            "*": {
                                "columns": {
                                    "size": "TotalPop"
                                }
                            }
                        }
                    },
                    "stacks": {
                        "*": {
                            "*": {
                                "signalValues": {
                                    "RoleX_BinsSignal": 30,
                                    "RoleY_BinsSignal": 30
                                }
                            }
                        }
                    }
                },
                "tooltipExclusions": ["Id", "Latitude", "Longitude"]
            }
        };
    </script>

    <main id="app"></main>

    <footer>
        {% include footer-links.html %}
    </footer>

    <script src="../external/js/react.development.js" crossorigin=""></script>
    <script src="../external/js/react-dom.development.js" crossorigin=""></script>
    <script src="js/sanddance-app.js"></script>

</body>

</html>